<template>
  <div class="home">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="加油卡号" prop="cardCode">
        <el-input v-model="queryParams.cardCode" placeholder="请输入加油卡号" clearable size="small" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-card>
      <div>
        <el-button type="success" size="small" @click="openunitDialog">新增加油卡</el-button>
        <el-button type="primary" size="small" @click="refresh">刷新</el-button>
      </div>

      <el-table :data="tableData" border style="width: 100%" class="elTable">
        <el-table-column type="index" label="序号" width="100" align="center" />
        <el-table-column prop="cardCode" label="加油卡号" align="center" />
        <el-table-column prop="cardType" label="加油卡类型" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.cardType == 'M'"> 主卡</span>
            <span v-if="scope.row.cardType == 'S'"> 副卡</span>
          </template>
        </el-table-column>
        <el-table-column prop="cardCompany" label="加油公司" align="center" />
        <el-table-column prop="cardAmount" label="卡余额" align="center" />
        <el-table-column prop="parentCode" label="主卡编码" align="center" />
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isUse == 'Y'"> 启用</span>
            <span v-if="scope.row.isUse == 'N'"> 禁用</span>
          </template>
        </el-table-column>
        <el-table-column prop="isUse" label="使用状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 'Y'"> 可使用</span>
            <span v-if="scope.row.status == 'U'"> 使用中</span>
            <span v-if="scope.row.status == 'P'"> 申请中</span>
          </template>
        </el-table-column>
        <el-table-column prop="message" label="其他信息" align="center" />

        <el-table-column label="操作" align="center" width="300">
          <template slot-scope="scope">
            <el-button type="info" size="small" @click="editUnit(scope.row)">修改</el-button>
            <el-button type="danger" size="small" @click="delunit(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="pageIndex" :limit.sync="pageSize" @pagination="getList" />
    </el-card>

    <el-dialog v-draggable :title="dialogTitle" :visible.sync="dialogVisible" width="50%" :modal="false">
      <el-form ref="form" :model="petrol" :rules="rules">
        <el-form-item label="加油卡号" prop="cardCode">
          <el-input v-model="petrol.cardCode" />
        </el-form-item>
        <el-form-item label="类型" prop="cardType">
          <el-radio-group v-model="petrol.cardType">
            <el-radio label="M">主卡</el-radio>
            <el-radio label="S">副卡</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="petrol.cardType == 'S'" label="主卡卡号" prop="parentCode">
          <el-select v-model="petrol.parentCode" placeholder="请选择">
            <el-option v-for="item in options" :key="item.cardCode" :label="item.cardCode" :value="item.cardCode" />
          </el-select>
        </el-form-item>
        <el-form-item label="加油公司" prop="cardCompany">
          <el-input v-model="petrol.cardCompany" />
        </el-form-item>
        <el-form-item label="卡余额" prop="cardAmount">
          <el-input v-model="petrol.cardAmount" />
        </el-form-item>
        <el-form-item label="使用状态" prop="isUse">
          <el-radio-group v-model="petrol.isUse">
            <el-radio label="Y">启用</el-radio>
            <el-radio label="N">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="其他信息" prop="message">
          <el-input v-model="petrol.message" />
        </el-form-item>

        <el-form-item>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addunit">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { queryCRefuelingPage, queryMRefueling, insertCRefueling, updateCRefueling, deleteCRefueling } from '@/api/unit/petrolCard'
export default {
  props: {
    dept: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      pageIndex: 1,
      pageSize: 10,
      tableData: [],
      dialogVisible: false,
      total: 0,
      petrol: {},
      dialogTitle: '',
      queryParams: {
        deptName: ''
      },
      rules: {
        cardCode: [{ required: true, message: '请输入卡号', trigger: 'blur' }],
        cardType: [{ required: true, message: '请选择类型', trigger: 'change' }],
        parentCode: [{ required: true, message: '请选择主卡', trigger: 'blur' }],
        cardCompany: [{ required: true, message: '请输入加油公司', trigger: 'blur' }],
        cardAmount: [{ required: true, message: '请输入金额', trigger: 'blur' }],
        isUse: [{ required: true, message: '请选择使用状态', trigger: 'change' }],
        message: [{ required: true, message: '请输入其他信息', trigger: 'blur' }]
      },
      options: []
    }
  },
  created () {
    this.getList()
  },
  mounted () { },
  methods: {
    async getScardList () {
      const res = await queryMRefueling()
      this.options = res.object
    },
    refresh () {
      this.$refs.queryForm.resetFields()
      this.pageIndex = 1
      this.getList()
    },
    async getList () {
      const { object } = await queryCRefuelingPage({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        companyCode: this.dept.companyCode,
        cardCode: this.queryParams.cardCode
      })
      this.tableData = object.data
      this.total = object.count
    },

    async openunitDialog () {
      this.dialogTitle = '新增加油卡'
      this.getScardList()
      this.petrol = {}
      this.petrol.companyCode = this.dept.companyCode
      this.petrol.companyName = this.dept.companyName
      this.petrol.cardType = 'M'
      this.petrol.isUse = 'Y'
      this.dialogVisible = true
    },
    editUnit (val) {
      this.dialogTitle = '修改加油卡'
      this.petrol = JSON.parse(JSON.stringify(val))
      this.dialogVisible = true
    },

    delunit (val) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await deleteCRefueling({ id: val.id })
          if (res.code === '200') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    addunit () {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (!this.petrol.id) {
            const res = await insertCRefueling(this.petrol)
            if (res.code === '200') {
              this.dialogVisible = false
              this.getList()
              this.$message({
                type: 'success',
                message: res.message
              })
            }
          } else {
            const res = await updateCRefueling({ id: this.petrol.id, deptName: this.petrol.deptName })
            if (res.code === '200') {
              this.dialogVisible = false
              this.getList()
              this.$message({
                type: 'success',
                message: res.message
              })
            }
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
